﻿@page

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>WebSocket-Client</title>
    <link href="/common/common.css" rel="stylesheet" />
    <script src="/common/jquery-3.4.1.js"></script>
    <style>
        html {
            padding: 30px;
        }
    </style>
    <script>
        function log(msg) {
            $("#log").val(new Date() + "\r\n" + msg + "\r\n\r\n" + $("#log").val());
        }

        $(document).ready(function () {
            if ("WebSocket" in window)
                log("您的浏览器支持 WebSocket!");
            else
                log("您的浏览器不支持 WebSocket!");

            var ws = new WebSocket("ws://localhost:9998/echo");

            $("#connect").click(function () {
                ws = new WebSocket($("#url").val());
                ws.onopen = function () {
                    log("ws open");
                };
                ws.onmessage = function (evt) {
                    log("ws receive: " + evt.data);
                };
                ws.onclose = function () {
                    log("ws close");
                };
            });

            $("#disconnect").click(function () {
                ws.close();
            });

            $("#send").click(function () {
                ws.send($("#msg").val());
            });
        });
    </script>
</head>
<body bgcolor="#cccccc">
    <h3>WebSocket-Client</h3>
    <hr />
    <input id="url" placeholder="ws://xxx.xxx.xxx.xxx:8888/xxxx" class="width500px" value="ws://127.0.0.1:8401/unity" />
    <button id="connect">连接</button>
    <button id="disconnect">断开</button>
    <hr />
    <textarea id="msg" class="width600px height100px"></textarea>
    <button id="send">发送</button>
    <hr />
    日志：<br />
    <textarea id="log" class="width700px height300px"></textarea>
</body>
</html>